<template>
  <div class="competition-list">
    <h2 class="title">学生竞赛记录</h2>

    <!-- 竞赛数据表格 -->
    <el-table :data="competitionData.records" style="width: 100%">
      <el-table-column prop="studentName" label="学生姓名" width="150"></el-table-column>
      <el-table-column prop="competitionName" label="竞赛名称" width="200"></el-table-column>
      <el-table-column prop="description" label="竞赛描述" width="300"></el-table-column>
      <el-table-column prop="startDate" label="开始日期" width="150"></el-table-column>
      <el-table-column prop="endDate" label="结束日期" width="150"></el-table-column>
      <el-table-column prop="participationStatus" label="参与状态" width="120"></el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
        layout="total, prev, pager, next, jumper, sizes"
        class="pagination"
    ></el-pagination>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      competitionData: { records: [] }, // 表格数据，初始化为空数组
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页大小
      total: 0, // 数据总条数
    };
  },
  methods: {
    // 获取竞赛数据
    async fetchCompetitionData() {
      try {
        const response = await axios.get('http://localhost:9000/competition/all-students', {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
          },
        });

        // 更新表格数据和分页总数
        this.competitionData = response.data; // 确保返回的数据结构包含 records 和 total
        this.total = response.data.total; // 设置总条数
      } catch (error) {
        console.error('获取竞赛数据失败:', error);
      }
    },
    // 页码变化时触发
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchCompetitionData(); // 重新获取数据
    },
    // 每页大小变化时触发
    handleSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1; // 重置为第一页
      this.fetchCompetitionData(); // 重新获取数据
    },
  },
  mounted() {
    this.fetchCompetitionData(); // 初始化时加载数据
  },
};
</script>

<style scoped>
/* 页面整体容器 */
.competition-list {
  padding: 20px;
  background-color: #f7f8fa;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 标题样式 */
.title {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  text-align: center;
  margin-bottom: 20px;
}

/* 表格样式 */
.el-table {
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-table .el-table__header {
  background-color: #f1f1f1;
  font-weight: bold;
}

.el-table th {
  text-align: center; /* 表头内容居中 */
}

.el-table td {
  text-align: center; /* 表格内容居中 */
  padding: 10px;
}

/* 分页组件样式 */
.pagination {
  margin-top: 20px;
  text-align: center;
  padding: 10px 0;
}

/* 优化分页按钮样式 */
.el-pagination button {
  background-color: #409EFF;
  border-color: #409EFF;
  color: #fff;
}

.el-pagination button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.el-pagination .el-pagination__sizes select {
  background-color: #fff;
  border-color: #dcdfe6;
  padding: 5px 10px;
  border-radius: 4px;
}

.el-pagination .el-pagination__jump {
  background-color: #fff;
  border-color: #dcdfe6;
  padding: 5px 10px;
  border-radius: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .el-table-column {
    width: auto; /* 适配小屏幕 */
  }

  .title {
    font-size: 20px;
  }
}
</style>
